<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue"
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { Erc20Module } from "@/store/modules/erc20";
import { getUserInfo, getParameter, getTrxReceiveAddress } from "@/api";
import { USDT_TOKEN } from "@/contract";
import { formatAddress, fromWei } from "@/utils/format";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import Clipboard from "clipboard";
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default defineComponent({
    components: {
        vueQr
    },
    setup() {

        const { t } = useI18n();
        const pageLoading = ref(true)
        const loading = ref(false)
        const userInfo = ref({})
        const parameter = ref({})
        const USDT = ref("")
        const amount = ref()
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast(t("layout.success"));
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const TrxReceiveAddress = ref()
        const sendTransfer = async () => {
            if (!Number(amount.value)) return;
            try {
                loading.value = true;
                await UserModule.verifyToken();
                if (fromWei(USDT.value) < Number(amount.value)) {
                    showToast(t("layout.theBalanceUSDTIsOnly") + fromWei(USDT.value));
                    loading.value = false;
                    return;
                }
                console.log({
                    amount: amount.value,
                    spender: parameter.value.ReceiveAddress,
                    owner: USDT_TOKEN,
                })
                const params = await Erc20Module.transfer({
                    amount: amount.value,
                    spender: parameter.value.ReceiveAddress,
                    owner: USDT_TOKEN,
                });
                await params.wait();
                showDialog({ title: `${t("layout.success")}` })
                loadData()
            } catch (error: any) {
            }
            loading.value = false;
        };
        const loadData = async () => {
            pageLoading.value = true
            await getParameter().then(res => {
                parameter.value = res.data.data.Parameter || []
            })
            getTrxReceiveAddress().then(res => {
                TrxReceiveAddress.value = res.data.data.TRXAddress
            })
            await Erc20Module.balanceOf({
                owner: USDT_TOKEN,
            }).then(res => {
                USDT.value = res
            })
            userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            amount,
            USDT,
            TrxReceiveAddress,
            pageLoading,
            userInfo,
            loading,
            fromWei,
            sendTransfer,
            copy
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="formData-bock">
            <div class="name">币安网络</div>
            <div class="form-box">
                <van-field v-model="amount" type="number" :placeholder="$t('layout.PleaseEnterTheRechargeAmount')">
                    <template #right-icon>
                        <span @click="amount = fromWei(USDT)">{{ $t('layout.all') }}</span>
                    </template>
                </van-field>
                <div class="cell">
                    <div class="label">{{ $t('layout.AccountBalance') }}</div>
                    <div class="value">{{ fromWei(USDT) }} USDT</div>
                </div>
            </div>
            <van-button type="primary" @click="sendTransfer" :disabled="pageLoading" :loading="loading">{{
                $t('layout.ConfirmRecharge') }}</van-button>
            <div class="text">
                <p>* 币安钱包有 USDT，可直接充值</p>
            </div>
        </div>
        <div class="block" v-if="TrxReceiveAddress">
            <div class="name">{{ $t('layout.TRONNetwork') }} <img src="@/assets/image/cp.png" @click="copy('.trx')"
                    class="trx" :data-clipboard-text="TrxReceiveAddress"></div>
            <div class="address">{{ TrxReceiveAddress }}</div>
            <vue-qr class="qr" :text="TrxReceiveAddress" :size="180" :margin="10"
                backgroundColor="rgba(11, 166, 98, 0.1)"></vue-qr>
            <div class="text">
                <p>1 {{ $t('layout.rechargeCoinsText1') }}</p>
                <p>2 {{ $t('layout.rechargeCoinsText2') }}</p>
                <p>3 {{ $t('layout.rechargeCoinsText3') }}</p>
                <p>4 {{ $t('layout.rechargeCoinsText4') }}</p>
            </div>
        </div>
        <div class="logs" @click="$refs.recordRefs.onRefresh()"><img src="@/assets/image/image6.png">{{
            $t('layout.RechargeRecord') }}</div>
    </div>
    <recharge-record ref="recordRefs" />
</template> 

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .formData-bock {
        padding: 15px;
        background: rgba(11, 166, 98, 0.05);
        border-radius: 8px;
        border: 1px solid #FFFFFF;

        .name {
            position: relative;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
        }

        .van-tabs {
            overflow: hidden;

            &:deep(.van-tabs__wrap) {
                height: 45px;
                background: rgba(11, 166, 98, 0.1);
                border-radius: 8px;
                overflow: hidden;
                border: 1px solid #FFFFFF;

                .van-tabs__nav {
                    background: transparent;

                    .van-tab {
                        &.van-tab--active {
                            width: 172px;
                            height: 44px;
                            background: #0BA662;
                            border-radius: 8px;
                            color: #fff;
                        }
                    }

                    .van-tabs__line {
                        display: none;
                    }
                }
            }
        }

        .form-box {
            margin-top: 15px;

            .van-field {
                margin-bottom: 8px;
                height: 45px;
                padding: 0 15px;
                background: rgba(11, 166, 98, 0.05);
                border-radius: 8px;
                border: 1px solid #FFFFFF;

                &:deep(input) {
                    height: 45px;
                    font-size: 13px;
                    color: rgba(11, 166, 98, 1);
                }

                span {
                    font-weight: 500;
                    color: #0BA662;
                    font-size: 13px;
                }
            }

            .cell {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 45px;
                padding: 0 15px;
                font-size: 13px;
                background: rgba(11, 166, 98, 0.15);
                border-radius: 8px;
                border: 1px solid #FFFFFF;

                .value {
                    font-weight: 500;
                    color: #0BA662;
                }
            }
        }

    }

    .van-button {
        margin-top: 20px;
    }

    .block {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 15px;
        text-align: center;
        background: #FFFFFF;
        border-radius: 8px;

        .name {
            position: relative;
            font-size: 16px;
            font-weight: 500;

            img {
                position: absolute;
                right: 15px;
                top: 0;
                width: 12px;
                height: 12px;
            }
        }

        .address {
            margin-top: 13px;
        }

        .qr {
            margin-top: 20px;
            border-radius: 8px;
        }


    }

    .logs {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #0BA662;

        img {
            margin-right: 8px;
            height: 15px;
        }
    }

    .text {
        text-align: left;
        padding: 20px;
        color: rgba(239, 64, 52, 1);

        p {
            line-height: 18px;
        }
    }
}
</style>
